<template>
  <!-- 活动基础项 -->
  <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
    <div class="flex item-box" v-for="(item,index) in itemData" :key="index" style="border-bottom:none">
      <div class="title width25">
        {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
      </div>
      <div class="content width80">
        <!-- 状态 -->
        <el-form-item class="item-clear" v-show="item.key=='status'">
          <el-tag  :type="formParams.status==1?'':formParams.status==2?'success':'info'">{{ formParams.status==1?'预发布':formParams.status==2?'开启':'关闭' }}</el-tag>
        </el-form-item>
        <!-- 活动名称 -->
        <el-form-item class="item-clear" v-show="item.key=='name'" prop="name">
          <el-select v-model="formParams.name" placeholder="请选择活动名称" filterable style="width:500px">
            <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in languageDataArray" :key="index" style="width:500px" />
          </el-select>
        </el-form-item>
        <!-- 活动类型 -->
        <el-select v-show="item.key=='time_type'" v-model="formParams.time_type" placeholder="请选择活动时间类型" filterable class="marginR10" @change="chooseTimeType">
          <el-option v-show="item.value" :label="item.label" :value="item.value" v-for="(item, index) in timeTypeData" :key="index" />
        </el-select>
        <!-- 活动时间 -->
        <el-date-picker v-if="formParams.time_type==2 && index==2" is-range v-model="formParams.time_arr" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="full-width-input time-box" :picker-options="disabledOptions" :default-time="['00:00:00', '23:59:59']" clearable />
        <el-input v-if="formParams.time_type==3 && index==2" type="text" v-model="formParams.start_time" clearable placeholder="请输入开始cron表达式" style="width:240px" />
        <span v-if="formParams.time_type==3 && index==2"> — </span>
        <el-input v-if="formParams.time_type==3 && index==2" type="text" v-model="formParams.end_time" clearable placeholder="请输入结束cron表达式" style="width:240px" />
        <!-- 活动展示时间 -->
        <el-date-picker v-show="item.key=='show_time' && formParams.time_type==2" is-range v-model="formParams.show_time_arr" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="full-width-input time-box" :picker-options="disabledOptions" :default-time="['00:00:00', '23:59:59']" clearable />
        <el-input v-if="item.key=='show_time' && formParams.time_type==3" type="text" v-model="formParams.show_start_time_str" clearable placeholder="请输入开始cron表达式" style="width:240px" />
        <el-input v-if="item.key=='show_time' && formParams.time_type==3" type="text" v-model="formParams.show_end_time_str" clearable placeholder="请输入结束cron表达式" style="width:240px" />
        <!-- 注册用户可见天数区间 -->
        <el-input-number v-if="item.key=='show_date'" :disabled="activity_type!=9" :min="0" :max="999999999" :precision="0" v-model="formParams.reg_show_date_start" controls-position="right" clearable placeholder="请输入活动开始展示天数"  />
        <span v-if="item.key=='show_date'"> — </span>
        <el-input-number v-if="item.key=='show_date'" :disabled="activity_type!=9" :min="0" :max="999999999" :precision="0" v-model="formParams.reg_show_date_end" controls-position="right" clearable placeholder="请输入活动结束展示天数"  />
        <!-- 手机端-状态栏 -->
        <div class="flex" v-show="item.key=='phone'">
          <div class="marginR20">
            <div class="flex">
              <el-checkbox v-model="formParams.scroll_bar_status" :true-label="1" :false-label="0">滚动栏</el-checkbox>
              <el-form-item label="排序:" prop="scroll_bar_sort" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.scroll_bar_sort" controls-position="right" clearable placeholder="请输入滚动栏状态排序"  />
              </el-form-item>
            </div>
            <div class="flex marginTB10">
              <el-checkbox v-model="formParams.activity_bar_status" :true-label="1" :false-label="0">活动栏</el-checkbox>
              <el-form-item label="排序:" prop="activity_bar_sort" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.activity_bar_sort" controls-position="right" clearable placeholder="请输入滚动栏状态排序"  />
              </el-form-item>
            </div>
            <div class="flex marginTB10">
              <el-checkbox v-model="formParams.promotion_bar_status" :true-label="1" :false-label="0">推广栏</el-checkbox>
              <el-form-item label="排序:" prop="promotion_bar_sort" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.promotion_bar_sort" controls-position="right" clearable placeholder="请输入滚动栏状态排序"  />
              </el-form-item>
            </div>
            <div class="flex marginTB10">
              <el-checkbox v-model="formParams.agent_center_status" :true-label="1" :false-label="0">代理中心</el-checkbox>
              <el-form-item label="排序:" prop="agent_center_sort" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.agent_center_sort" controls-position="right" clearable placeholder="代理中心排序"  />
              </el-form-item>
            </div>
            <div class="flex">
              <el-checkbox v-model="formParams.agent_center_share_status" :true-label="1" :false-label="0">代理中心分享</el-checkbox>
              <el-form-item label="排序:" prop="activity_bar_sort" label-width="60px">
                <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.agent_center_share_sort" controls-position="right" clearable placeholder="代理中心分享排序"  />
              </el-form-item>
            </div>
          </div>
          <!-- 活动ICON -->
          <!-- <el-form-item label="活动Icon:" prop="activity_icon" label-width="90px">
            <imgUpLoad :url="formParams.activity_icon" @success='imgUploadChangIcon'/>
          </el-form-item> -->
        </div>
        <!-- Web端-状态栏 -->
        <div class="padding10" v-show="item.key=='web'">
          <el-form-item label="排序:" prop="web_sort" label-width="90px">
            <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.web_sort" controls-position="right" clearable placeholder="请输入官网图片排序"  />
          </el-form-item>
          <el-form-item label="多语言Icon:" label-width="90px" class="marginT10">
            <el-select v-model="formParams.web_lang" placeholder="请选择多语言" multiple clearable filterable style="width: 100%;" @change="chooseWebLangItem">
              <el-option :label="item.label" :value="item.key" v-for="(item, index) in langDataList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="webLangDataList.length > 0">
            <div class="flexWrap">
              <div class="prooItem" v-for="(item, index) in webLangDataList" :key="index">
                <p>{{ item.label }}:</p>
                <imgUpLoad :url="item.url" @success='(url)=>{imgWebUploadChang(url,index)}' />
              </div>
            </div>
          </div>
        </div>
        <!-- 手机端-状态栏 -->
        <div class="padding10" v-show="item.key=='mobile'">
          <el-form-item label="排序:" prop="mobile_sort" label-width="90px">
            <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.web_sort" controls-position="right" clearable placeholder="请输入官网图片排序"  />
          </el-form-item>
          <el-form-item label="多语言Icon:" label-width="90px" class="marginT10">
            <el-select v-model="formParams.mobile_lang" placeholder="请选择多语言" multiple clearable filterable style="width: 100%;" @change="chooseMobileLangItem">
              <el-option :label="item.label" :value="item.key" v-for="(item, index) in langDataList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="mobileLangDataList.length > 0">
            <div class="flexWrap">
              <div class="prooItem" v-for="(item, index) in mobileLangDataList" :key="index">
                <p>{{ item.label }}:</p>
                <imgUpLoad :url="item.url" @success='(url)=>{imgMobileUploadChang(url,index)}' />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
import {
  LANG_DATA
} from "@/utils/enum";
import imgUpLoad from '@/components/imgUpLoadSingle'
export default {
  components: {
    imgUpLoad
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    activity_type: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      LANG_DATA,
      isShow: false,
      disabledOptions: {
        disabledDate: date => {
          return date && date.valueOf() < new Date().getTime()-86400000;
        }
      },
      languageDataArray: this.$store.state.commonState.languageDataArray,
      timeTypeData:[
        {label:'永久活动',value:1,type:'success'},
        {label:'限时活动',value:2,type:'danger'},
        {label:'循环活动',value:3,type:'primary'},
      ],
      statusData:[
        {label:'预发布',value:1,type:''},
        {label:'开启',value:2,type:'success'},
        {label:'关闭',value:3,type:'info'}
      ],
      itemData: [
        { label: '活动状态', key: 'status' },
        { label: '活动名称', key: 'name' ,pass:true},
        { label: '活动时间', key: 'time_type' },
        { label: '活动展示时间', key: 'show_time' },
        { label: '注册用户可见天数区间', key: 'show_date' },
        { label: '游戏活动栏', key: 'phone' },
        { label: '展示(web端)', key: 'web' },
        { label: '展示(手机端)', key: 'mobile' },
      ],
      formParams: {
        status: 3, //1是准备,2是开启,3是关闭,0默认
        name: '', //活动名称 后台多语言id
        activity_type: '', //活动类型 运营商唯一
        time_type: 1, //时间类型,1是永久活动,2是限时活动,3是循环活动
        time_arr: [],
        start_time: '', //开始时间
        end_time: '', //结束时间
        reg_show_date_start: '', //用户可见天数
        reg_show_date_end: '', //用户可见天数
        show_time_arr: [],
        show_start_time_str: '', //开始时间
        show_end_time_str: '', //结束时间
        scroll_bar_status: 0, //滚动栏状态 1是开启 0是关闭
        scroll_bar_sort: 1, //滚动栏状态排序
        activity_bar_status: 0, //活动栏状态 1是开启 0是关闭
        activity_bar_sort: 1, //活动栏状态排序
        promotion_bar_status: 0, //推广栏状态 1是开启 0是关闭
        promotion_bar_sort: 1, //推广栏状态排序
        agent_center_status: 0, //代理中心 1是开启 0是关闭
        agent_center_sort: 1, //代理中心排序
        agent_center_share_status: 0, //代理中心分享 1是开启 0是关闭
        agent_center_share_sort: 1, //代理中心分享
        activity_icon: '', //活动icon
        web_lang: [], // 选择的多语言
        mobile_lang: [], // 选择的多语言
        web_activity_image: '',
        mobile_activity_image: '',
        web_sort: 0,
        mobile_sort: 0,
      },
      webLangDataList: [],
      mobileLangDataList: [],
      imageData: [],
      langDataList: LANG_DATA,
      ruleForm: {
        name: [{ required: true, trigger: 'blur', message: '请选择活动标题', }],
      },
    }
  },
  computed: {},
  watch: {
    data: {
      handler(newVal) {
        let that = this;
        if (newVal) {
          // newVal.time_arr=[]
          // newVal.show_time_arr=[]
          that.formParams = JSON.parse(JSON.stringify(newVal))
          let params = that.formParams;
          // 限时活动
          if (params.time_type == 2) {
            // 活动时间
            that.formParams.time_arr = [params.start_time,params.end_time]
            // 展示时间
            that.formParams.show_time_arr = [params.show_start_time_str, params.show_end_time_str]
          }
          // 多语言-图片
          if(params.web_activity_image){
            that.webLangDataList = JSON.parse(params.web_activity_image)
            that.formParams.web_lang = []
            that.webLangDataList.map(item => {
              that.formParams.web_lang.push(item.value)
            })
          }
          if(params.mobile_activity_image){
            that.mobileLangDataList = JSON.parse(params.mobile_activity_image)
            that.formParams.mobile_lang = []
            that.mobileLangDataList.map(item => {
              that.formParams.mobile_lang.push(item.value)
            })
          }
        } else {
          that.webLangDataList = []
          that.mobileLangDataList = []
          that.formParams = {
            status: 3,
            activity_type: '',
            name: '',
            time_type: 1,
            time_arr: [],
            start_time: '', //开始时间
            end_time: '', //结束时间
            reg_show_date_start: '',
            reg_show_date_end: '',
            show_time_arr: [],
            show_start_time_str: '',
            show_end_time_str: '',
            scroll_bar_status: 0,
            scroll_bar_sort: 1,
            activity_bar_status: 0,
            activity_bar_sort: 1,
            promotion_bar_status: 0,
            promotion_bar_sort: 1,
            agent_center_status: 0,
            agent_center_sort: 1,
            agent_center_share_status: 0,
            agent_center_share_sort: 1,
            activity_icon: '',
            web_lang: [], // 选择的多语言
            mobile_lang: [], // 选择的多语言
            web_activity_image: '',
            mobile_activity_image: '',
            web_sort: 0,
            mobile_sort: 0,
          }
        }
      },
      immediate:true
    },
   
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm () {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams));
      if(!params.name){
        return that.$message.error('请选择活动名称')
      }
      // 限时活动
      if(params.time_type==2){
        // 活动时间
        if(params.time_arr[0] && params.time_arr[1]){
          params.start_time=that.$public.standardDate(params.time_arr[0])
          params.end_time=that.$public.standardDate(params.time_arr[1])
          // if(new Date(params.start_time).getTime()<=new Date().getTime()){
          //   return that.$message.error('活动开始时间必须 ≥ 当前时间')
          // }
        }else{
          return that.$message.error('请选择正确的活动时间')
        }
        // 展示时间
        if(params.show_time_arr[0] && params.show_time_arr[1]){
          params.show_start_time_str=that.$public.standardDate(params.show_time_arr[0])
          params.show_end_time_str=that.$public.standardDate(params.show_time_arr[1])
        }else{
          return that.$message.error('请选择正确的活动展示时间')
        }
        // 展示时间---活动时间
        if(new Date(params.show_time_arr).getTime()>new Date(params.start_time).getTime()){
          return that.$message.error('活动展示开始时间必须 ≤ 活动开始时间')
        }
        if(new Date(params.show_end_time_str).getTime()<new Date(params.end_time).getTime()){
          return that.$message.error('活动展示结束时间必须 ≥ 活动结束时间')
        }
      }
      // 永久活动
      if(params.time_type==1){
        params.start_time=''
        params.end_time=''
        params.show_start_time_str=''
        params.show_end_time_str=''
      }
      // 活动展示时间
      if(params.reg_show_date_start>params.reg_show_date_end){
        return that.$message.error('请输入正确的活动展示时间')
      }
      // 查询是否有英语
      if(that.webLangDataList.length!=0){
        if(!that.webEnglishExist()){
          return that.$message.error('请输入Web英语对应的语言内容')
        }
      }
      params.web_activity_image=JSON.stringify(that.webLangDataList)
      if(that.mobileLangDataList.length!=0){
        if(!that.mobileEnglishExist()){
          return that.$message.error('请输入Mobile英语对应的语言内容')
        }
      }
      params.mobile_activity_image=JSON.stringify(that.mobileLangDataList)
      // if(!params.activity_icon){
      //   return that.$message.error('请上传活动Icon')
      // }
      if(that.$route.name=='预发布活动'){
        params.status=1
      }else if(that.$route.name=='上线活动'){
        params.status=2
      }else if(that.$route.name=='已下线活动'){
        params.status=3
      }
      
      return params
    },
    // 选择时间类型
    chooseTimeType (val) {
      let that = this;
      that.formParams.time_type=val
      if (val != 2) {
        that.formParams.start_time = ''
        that.formParams.end_time = ''
        that.formParams.show_start_time_str = ''
        that.formParams.show_end_time_str = ''
      }
    },
    // 选择语言
    chooseWebLangItem (val) {
      let that = this;
      that.webLangDataList = []
      that.uploadDisabled = false
      that.langDataList.map(item => {
        val.map(first => {
          if (item.key == first) {
            that.webLangDataList.push(item)
          }
        })
      })
    },
    // 选择语言
    chooseMobileLangItem (val) {
      let that = this;
      that.mobileLangDataList = []
      that.uploadDisabled = false
      that.langDataList.map(item => {
        val.map(first => {
          if (item.key == first) {
            that.mobileLangDataList.push(item)
          }
        })
      })
    },
    // 是否有英语
    webEnglishExist(){
      return (this.webLangDataList.find((item) => item.key === 'c_base_en_us')?.lang || '')
    },
    mobileEnglishExist(){
      return (this.mobileLangDataList.find((item) => item.key === 'c_base_en_us')?.lang || '')
    },
    // 上传图片
    imgUploadChangIcon (url) {
      this.formParams.activity_icon = url
    },
    imgWebUploadChang (url, index) {
      this.webLangDataList[index].url = url
    },
    imgMobileUploadChang (url, index) {
      this.mobileLangDataList[index].url = url
    },
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 0;
}
.prooItem {
  margin: 5px;
  font-size: 16px;
  font-weight: 500;
  p {
    height: 24px;
  }
}
</style>
